<template>
    <el-containner>
      <el-row>
        <el-col :span="24">
          <div id="myUpload">
            <el-button type="primary" size="mini" @click="uploadFile">导入</el-button>
            <!--上传-->
            <el-dialog title="上传" width="40%" :visible.sync="uploadTemplateDialog">
                <el-row>
                    <el-col :span="22">
                        <el-upload class="upload-demo"
                                  ref="upload"
                                  action=""
                                  :accept="acceptFileType"
                                  :limit="1"
                                  :on-exceed="handleExceed"
                                  :before-upload="beforeUpload"
                                  :on-preview="handlePreview"
                                  :on-remove="handleRemove"
                                  :file-list="fileList"
                                  :auto-upload="false">
                            <el-button slot="trigger" size="small" type="primary">选取Excel格式文件</el-button>
                            <div slot="tip" class="el-upload_tip">只能上传.xls文件,且不超过1M</div>
                        </el-upload>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="submitUpload" type="primary" size="mini" :loading="uploadLoading" > 确定上传</el-button>
                    <el-button @click="uploadTemplateDialog=false" size="mini">取消</el-button>
                </span>
            </el-dialog>
            </div>
        </el-col>
      </el-row>
      <div class="mod-demo-echarts">
          <el-row :gutter="20">
              <el-col :span="24">
                  <el-card>
                  <div id="J_chartLineBox_B" class="chart-box"></div>
                  </el-card>
              </el-col>
          </el-row>
      </div>
    </el-containner>
</template>
<script>
import echarts from 'echarts'
import { treeDataTranslate } from '@/utils'
export default {
    data(){
        return {
            key: [],
            value: [],
            chartLine: null,
            uploadTemplateDialog:false,
            fileList:[],
            uploadLoading:false,
            acceptFileType:'.xls',
            downLoadLoading:'',
        }
    },
    mounted () {
      this.initChartLine()
    },
    activated () {
      if (this.chartLine) {
        this.chartLine.resize()
      }
    },
    methods: {
      activeItem(_item){
        this.titleList.forEach(item=>{
          item.active=false;
        });
        _item.active = true;
        console.log(this.titleList);
        this.$forceUpdate();
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sku/getSkuInfo'),
          method: 'get',
          params: null
        }).then(({data}) => {
          this.key = data.sku.key,
          this.value = data.sku.value,
          this.dataListLoading = false,
          this.initChartLine(),
          console.info(data.sku.key)
        })
      },
      // 折线图
      initChartLine (dt) {
        var option = {
          'title': {
            'text': 'sku销售波动'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ 'sku']
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data': this.key
          },
          'yAxis': {
            'type': 'value'
          },
          'series': [
            {
              'name': 'sku',
              'type': 'line',
              'stack': '总量',
              'data': this.value
            }
          ]
        }
        this.chartLine = echarts.init(document.getElementById('J_chartLineBox_B'))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      },
    },
    activated(){
        this.getDataList()
    },
    uploadFile(){
      this.uploadLoading=false;
      var that=this;
      this.fileList=[];
      this.uploadTemplateDialog=true;
      setTimeout(function(){
          that.$refs.upload.clearFiles();
      },100);
    },
    handleExceed(files,fileList){
      this.$message.warning('只能选择1个文件!');
    },
    submitUpload(){
      this.uploadLoading=true;
      var that=this;
      setTimeout(function () {
          if(that.$refs.upload.$children[0].fileList.length==1){
              that.$refs.upload.submit();
          }else{
              that.uploadLoading=false;
              that.$message({
                  type:'error',
                  showClose:true,
                  duration:3000,
                  message:'请选择文件!'
              });
          };
      },100);
    },
    handleRemove(file,fileList){
        //console.log(file,fileList);
    },
    handlePreview(file){
        //console.log(file);
    },
    beforeUpload(file){
        var that=this;
        //文件类型
        var fileName=file.name.substring(file.name.lastIndexOf('.')+1);
        if(fileName!='xls'){
            that.uploadTemplateDialog=false;
            that.$message({
                type:'error',
                showClose:true,
                duration:3000,
                message:'文件类型不是.xls文件!'
            });
            return false;
        }
        //读取文件大小
        var fileSize=file.size;
        console.log(fileSize);
        if(fileSize>1048576){
            that.uploadTemplateDialog=false;
            that.$message({
                type:'error',
                showClose:true,
                duration:3000,
                message:'文件大于1M!'
            });
            return false;
        }
        that.downloadLoading=that.$loading({
            lock:true,
            text:'数据导入中...',
            spinner:'el-icon-loading',
            background:'rgba(0,0,0,0.7)'
        });
        let fd=new FormData();
        fd.append('file',file);
        fd.append('_t1',new Date());
        axios({
            method:'post',
            url:'http://localhost:8080/renren-fast/sku/upload/'+new Date().getTime(),
            data:fd,
            headers:{"Content-Type":"multipart/form-data;boundary="+new Date().getTime()}
        }).then(rsp=>{
            that.downloadLoading.close();
            that.uploadLoading=false;
            let resp=rsp.data
            if(resp.resultCode==200){
                that.uploadTemplateDialog=false;
                that.$message.success(resp.resultMsg);
                //that.queryData();//更新数据
            }else{
                that.uploadTemplateDialog=false;
                that.$message({
                    type:'error',
                    showClose:true,
                    duration:60000,
                    message:resp.resultMsg
                });
            }
        }).catch(error=> {
            that.downloadLoading.close();
            that.uploadLoading=false;
            that.uploadTemplateDialog=false;
            that.$message({
                type:'error',
                showClose:true,
                duration:60000,
                message:'请求失败! error:'+error
            });
        })
        return false;
    }
}
</script>

<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
</style>